<template>
  <div style="background:#f3f3f3">
    <header class="mint-header" style="font-size: 18px;">
      <div class="mint-header-button is-left">
        <button class="mint-button mint-button--default mint-button--normal" style="font-size: 15px;" @click="option">
          <span class="mint-button-icon">
            <i class="mintui mintui-back"></i>
          </span>
          <label class="mint-button-text">返回</label>
        </button>
      </div>
      <h1 class="mint-header-title">车辆维修审批</h1>
      <div class="mint-header-button is-right"></div>
    </header>
    <!-- <div style="height:40px" /> -->
    <!-- <div>{{equilist.length}}</div> -->
    <div style="padding:10px 15px;background:#fff">
      <div>
        <chousebumen :getspl.sync="carData.branchid" />

        <mt-field label="*申请时间:" style="margin-left:-8px;">
          <span style="color:#888;display:inline-block;text-align:right" @click="addtime">{{ carData.examintime }}</span>
        </mt-field>

        <picker :values="carData.carid" :picdata="carlist" class="rd_picker" style="margin-left:-8px;" pictitle="*车辆牌照" @getpicval="getpicval" />
        <mt-field v-model="carData.mileage" style="margin-left:-8px;" label="*公里数:" placeholder="输入公里数" />
        <picker :values="carData.codeid" :picdata="codeidArr" class="rd_picker" style="margin-left:-8px;" pictitle="*申请项目" @getpicval="getpicval11" />
        <mt-field v-model="carData.address" style="margin-left:-8px;" label="*维修地点:" placeholder="输入维修地点" />
        <mt-field v-model="carData.amount" style="margin-left:-8px;" label="*申请金额(元):" placeholder="输入申请金额" />
        <mt-field v-model="carData.detail" style="margin-left:-8px;" label="*维修明细:" placeholder="输入维修明细" />
        <mt-field v-model="carData.beizhu" style="margin-left:-3px;" label="维修备注:" placeholder="输入维修备注" />
        <div style="margin:0 10px;margin-left:5px;border-top:1px solid #ddd;padding-top:10px">
          <span style="display:block;height:30px">上传附件：</span>
          <div style="width:100%;display:flex;flex-wrap:wrap;">
            <div v-for="(item, index) in filearr1" :key="index" style="width:20%;padding:0 5px;">
              <uploadpic :imagefile.sync="filearr1[index]" />
            </div>
          </div>
        </div>
        <chouseperson :atypeid="'0104'" :num="carData.amount" @getspl="getspl" />
        <!-- <mt-field label="审批流:" v-model="carid">
          <span @click="addcarid" style="color:#888" v-if="chouseval=='请选择牌照'">{{chouseval}}</span>
          <span @click="addcarid" style="color:#888" v-else>{{chouseval[0]}}</span>
        </mt-field>-->
      </div>
      <div class="btn_f">
        <mt-button type="default" style="width:100px;margin-right:15px" @click="goback">取消</mt-button>
        <mt-button type="primary" style="width:100px" @click="submitcar">确定</mt-button>
      </div>
    </div>
    <div class="datePicker">
      <mt-datetime-picker ref="picker" :start-date="new Date()" :visible-item-count="5" type="date" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" @confirm="handleConfirm" @visible-change="closepicker" />
    </div>
  </div>
</template>
<script>
import picker from '~/components/picker.vue'
import uploadpic from '~/components/uploadpic.vue'
import chouseperson from '~/components/chouseperson.vue'
import chousebumen from '~/components/chousebumen.vue'
export default {
  components: {
    uploadpic,
    chouseperson,
    chousebumen,
    picker
  },
  data () {
    return {
      ts: this.newStore(),
      chouseval: '',
      popupVisible22: false,
      carData: {
        codeid: '',
        examintime: this.formatDate(new Date()),
        carid: '',
        amount: ''
      },
      chousname: [],
      grantime: '请选择时间',

      filename: {
        name: '点我上传'
      },
      filearr1: [{}, {}, {}, {}, {}],
      codeidArr: [],
      carlist: [],
      aid: '',
      flag: '',
      htitle: '车辆维修审批',
      handler: function (e) {
        e.preventDefault()
      },
    }
  },
  mounted () {
    this.getcodeData('0301', '03', 'codeidArr')
    this.chouseval = '请选择车牌号'
    //this.carData.
    this.getcarlist()
  },
  computed: {
    summoney () {
      let a = 0
      console.log(this.carData, 'sum')
      for (let i = 0; i < this.carData.length; i++) {
        a += Number(this.carData[i].amount)
      }
      return a
    }
  },
  methods: {
    closepicker (val) {
      if (val) {
        this.closeTouch()
      } else {
        this.openTouch()
      }
    },
    closeTouch () {
      document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false })//阻止默认事件
    },
    openTouch () {
      document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, { passive: false })//打开默认事件
    },
    goback () {
      this.$router.push({ name: 'approval2', query: { name: '申请' } })
    },
    // 公共方法获取代码项
    getcodeData (supid, codetype, arrname) {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid,
        codetype
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        let a = []
        let item
        for (let index = 0; index < ts.d.data.operation1.length; index += 1) {
          let b = {}
          item = ts.d.data.operation1[index]
          b.showid = item.hash.code_id
          b.showname = item.hash.code_name
          a.push(b)
        }
        this[arrname] = a
      })
    },
    getpicval11 (val) {
      this.carData.codeid = val.showid
    },
    getpicval (val) {
      this.carData.carid = val.showid
    },
    checksplnum (money2, splid) {
      const req = {
        handle:
          '9000B8B8D347526960C5BAB1FB6894EF3277431D02D636A5015C1425899A1F59A41CF7A197311E4A',
        flowid: splid,
        number: money2
      }
      const p = this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.data.operation1[0].hash.cou == '0') {
          this.flag = false
        } else {
          this.flag = true
        }
      })
      return p
    },
    submitcar () {
      if (this.carData.branchid == '' || this.carData.branchid == undefined) {
        this.$messagebox('提示', '请选择申请部门')
        return
      }
      if (this.carData.examintime == '') {
        this.$messagebox('提示', '请选择申请时间')
        return
      }

      if (this.carData.carid == '' || this.carData.carid == undefined) {
        this.$messagebox('提示', '请选择牌照')
        return
      }
      if (this.carData.mileage == '' || this.carData.mileage == undefined) {
        this.$messagebox('提示', '请输入公里数')
        return
      }
      if (this.carData.codeid == '' || this.carData.codeid == undefined) {
        this.$messagebox('提示', '请选择申请项目')
        return
      }
      if (this.carData.address == '' || this.carData.address == undefined) {
        this.$messagebox('提示', '请选择维修地点')
        return
      }
      if (this.carData.amount == '' || this.carData.amount == undefined) {
        this.$messagebox('提示', '请选择申请金额')
        return
      }
      if (this.carData.detail == '' || this.carData.detail == undefined) {
        this.$messagebox('提示', '请选择维修明细')
        return
      }
      if (this.aid == '' || this.aid == undefined) {
        this.$messagebox('提示', '请选择审批流')
        return
      }
      this.checksplnum(this.carData.amount, this.aid).then(() => {
        console.log(this.flag, 'this.flag')
        // if (this.flag == false) {

        //   this.$messagebox('提示','审批流不符合条件，请重新选择')
        //   return
        // }
        this.$messagebox('提示', '确认提交车辆维修审批?')
          .then(() => {
            const req = {
              handle:
                '9000B8B8D347526960C5BAB1FB6894EF8B7B312373E9BEF47A8517CE4098C19A',
              atype: '0104',
              flowid: this.aid
            }
            this.spost(this.ts, '/mainservlet', req).then(ts => {
              console.log(this.filearr1, 'this.filearr1')

              const req2 = this.carData
              req2.aid = ts.d.data.operation3[0].hash.approvalid
              req2.handle =
                '27C5BBCC57742906E0FD67DAD8D2622896D1E3093AF33DA1CEF18ACE4D4B4EB6BFF0B9210751F692'
              req2.bigamount = this.convertCurrency(this.carData.amount)
              req2.fileurl = this.posturl(this.filearr1)
              req2.filename = this.postname(this.filearr1)
              this.spost(this.ts, '/mainservlet', req2).then(() => {
                this.$messagebox('提示', '提交成功')
                this.$router.push({ name: 'jbrhome', query: { name: '' } })
              })
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
      })
    },
    // 公共方法图片数组转路径数组
    posturl (arr) {
      const a = []
      for (let i = 0; i < arr.length; i += 1) {
        a.push(arr[i].url)
      }
      return a
    },
    // 公共方法图片数组转名称数组
    postname (arr) {
      const b = []
      for (let i = 0; i < arr.length; i += 1) {
        b.push(arr[i].name)
      }
      return b
    },
    // 金额转大写
    convertCurrency (money) {
      // 汉字的数字
      const cnNums = new Array(
        '零',
        '壹',
        '贰',
        '叁',
        '肆',
        '伍',
        '陆',
        '柒',
        '捌',
        '玖'
      )
      // 基本单位
      const cnIntRadice = new Array('', '拾', '佰', '仟')
      // 对应整数部分扩展单位
      const cnIntUnits = new Array('', '万', '亿', '兆')
      // 对应小数部分单位
      const cnDecUnits = new Array('角', '分', '毫', '厘')
      // 整数金额时后面跟的字符
      const cnInteger = '整'
      // 整型完以后的单位
      const cnIntLast = '元'
      // 最大处理的数字
      const maxNum = 999999999999999.9999
      // 金额整数部分
      let integerNum
      // 金额小数部分
      let decimalNum
      // 输出的中文金额字符串
      let chineseStr = ''
      // 分离金额后用的数组，预定义
      let parts
      if (money == '') {
        return ''
      }
      money = parseFloat(money)
      if (money >= maxNum) {
        // 超出最大处理数字
        return ''
      }
      if (money == 0) {
        chineseStr = cnNums[0] + cnIntLast + cnInteger
        return chineseStr
      }
      // 转换为字符串
      money = money.toString()
      if (money.indexOf('.') == -1) {
        integerNum = money
        decimalNum = ''
      } else {
        parts = money.split('.')
        integerNum = parts[0]
        decimalNum = parts[1].substr(0, 4)
      }
      // 获取整型部分转换
      if (parseInt(integerNum, 10) > 0) {
        let zeroCount = 0
        const IntLen = integerNum.length
        for (var i = 0; i < IntLen; i++) {
          var n = integerNum.substr(i, 1)
          const p = IntLen - i - 1
          const q = p / 4
          const m = p % 4
          if (n == '0') {
            zeroCount++
          } else {
            if (zeroCount > 0) {
              chineseStr += cnNums[0]
            }
            // 归零
            zeroCount = 0
            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m]
          }
          if (m == 0 && zeroCount < 4) {
            chineseStr += cnIntUnits[q]
          }
        }
        chineseStr += cnIntLast
      }
      // 小数部分
      if (decimalNum != '') {
        const decLen = decimalNum.length
        for (var i = 0; i < decLen; i++) {
          var n = decimalNum.substr(i, 1)
          if (n != '0') {
            chineseStr += cnNums[Number(n)] + cnDecUnits[i]
          }
        }
      }
      if (chineseStr == '') {
        chineseStr += cnNums[0] + cnIntLast + cnInteger
      } else if (decimalNum == '') {
        chineseStr += cnInteger
      }
      return chineseStr
    },
    getspl (val) {
      console.log(val, 'val')
      this.aid = val.id
      // this.shenpi = val
    },
    addqjtime () {
      this.$router.push({
        name: 'jbrtime'
      })
    },
    addqjtime2 () {
      this.$router.push({
        name: 'jbrbxson'
      })
    },
    option () {
      this.$router.push({
        name: 'approval2',
        query: {
          name: ''
        }
      })
    },
    //获取牌照且添加牌照

    //mint时间选择器开始
    addtime () {
      this.$refs.picker.open()
    },
    getcarlist () {
      const req = {
        handle: '0E56125B90D2898A62E387C1CED62EC408B04B35BD44D675',
        query: ''
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        let a = []

        let item
        for (let index = 0; index < ts.d.data.operation1.length; index += 1) {
          let b = {}
          item = ts.d.data.operation1[index]
          b.showid = item.hash.carid
          b.showname = item.hash.carno
          a.push(b)
        }
        this.carlist = a
        console.log('11111')
      })
    },
    deletime (index) {
      console.log(index)
      this.timedata.splice(index, 1)
      console.log(this.timedata)
    },
    //时间赋值
    handleConfirm (data) {
      console.log(data)
      this.carData.examintime = this.formatDate(data)
    },
    //时间选择优化函数
    formatDate (date) {
      const y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      return y + '-' + m + '-' + d
    },
    handleConfirm2 () {
      //this.chouseval = this.$refs.picker.getValues()[0]
      this.popupVisible22 = false
    },
    //赋值
    onDateChange (picker, values) {
      //console.log(picker)
      console.log(values)
      this.chouseval = values
      for (let k = 0; k < this.chousname.length; k++) {
        if (this.chouseval == this.chousname[k].carno) {
          this.chouseid = this.chousname[k].carid
        }
      }
    }
  }
}
</script>
<style scoped>
.mint-field-core {
  text-align: right;
}
.timeright {
  display: inline-block;
  float: right;
}
.timeitem {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.btn_f {
  margin: 10px;
  text-align: center;
}
.qjtime {
  padding: 0 10px;
  line-height: 25px;
}
.qjcolor {
  color: blue;
  display: inline-block;
  float: right;
}
.sbdata {
  margin: 10px;
  line-height: 25px;
}
.delright {
  float: right;
  color: red;
  padding-left: 5px;
}
.mint-field-other span {
  color: #333 !important;
}
.mint-cell-value .h3 {
  color: #333 !important;
}
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #333;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #333;
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #333;
}
:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #333;
}
.picker-center-highlight {
  position: absolute;
  top: 50% !important;
}
.picker-item {
  position: relative;
  top: 35px !important;
}
</style>
